<template>
    <div class="courseList">
        <div class="top">
            <!--左侧图片-->
            <div class="left">
                <img :src="subject.subPic">
            </div>
            <!--课程详情-->
            <div class="right">
                <div style="margin-top: 8px">
                    <Row>
                        <Col span="1" class="title">
                        标题:</Col>
                        <Col span="12">
                        <span class="cont">{{subject.subName}}</span>
                        </Col>
                        <!--<Col span="1" class="title">
                        课时:</Col>
                        <Col span="1">
                        <span class="cont">{{subject.subTotal}}</span>-->
                        </Col>
                        <Col span="1" class="title">
                        评分:</Col>
                        <Col span="1">
                        <span class="cont">{{subject.subScore}}</span>
                        </Col>
                    </Row>
                </div>
                <div>
                    <Row style="margin-top: 6px">
                        <Col span="1" class="title">
                        讲师:</Col>
                        <Col span="2" class="tch" v-for="(obj,i) of tchList" :key="i">
                        <span>{{obj}}</span>
                        </Col>
                    </Row>
                    <Row style="margin-top: 6px">
                        <Col span="2" class="title">
                        QQ群:</Col>
                        <Col span="3" class="qq" v-for="(obj,i) of qqList" :key="i">
                        <span>{{obj}}</span>
                        </Col>
                    </Row>
                </div>

                <div>
                    <Row style="margin-top: 6px">
                        <Col span="1" class="title">
                        简介:</Col>
                        <Col span="22">
                        <span v-html="subject.subIntroduction"></span>
                        </Col>
                    </Row>
                </div>
            </div>
        </div>

        <div class="list">
            <div v-for="(obj,i) of list" :key="i">
                <div class="c-c-box">
                    <div class="chapter-pre">
                        <img src="../../assets/course/chapter.png">
                    </div>
                    <div class="chapter">
                        第 {{i+1}} 章 <span>{{obj.chapterName}}</span>
                    </div>
                </div>


                <div class="course-box">
                    <div v-for="(c,j) of obj.courseList" :key="j">
                        <div class="c-c-c">
                            <div class="course-pre">
                                <img src="../../assets/course/video.png">
                            </div>
                            <div class="course">
                                {{c.courseName}}
                            </div>
                            <div style="float: right">
                                <!--浏览人次-->
                                <!--课程评分-->
                                <!--会员等级-->
                                <!--课程时长-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        components: {},
        data() {
            return {
                sid: this.$route.query.sid,
                //课程详细信息
                subject: {
                    //主键Id
                    subjectId: "",
                    //科目名称
                    subName: "",
                    //课程图片
                    subPic: "",
                    //课程社区url
                    subCommunityUrl: "",
                    //课程教师
                    subTeacher: "",
                    //qq群
                    qqGroup: "",
                    //课程简介
                    subIntroduction: "",
                    //课时总数
                    subTotal: "",
                    //课程评分，0-5，默认5分
                    subScore: "",
                    //是否vip课程 默认0,非vip课程
                    vip: "",
                    //显示排序
                    showOrder: "",
                    //状态  1在用  0失效
                    status: "",
                    //创建人id
                    createUser: "",
                    //创建时间
                    createTime: "",
                },
                tchList: [],
                qqList: [],
                //章节课程列表
                list: [],
                //章节对象
                chapter: {
                    chapterId: "",
                    subjectId: "",
                    chapterName: "",
                    courseList: []
                },
                //课程对象
                course: {
                    courseId: "",
                    subjectId: "",
                    chapterId: "",
                    courseName: "",
                    courseUrl: "",
                    courseTime: "",
                    courseView: "",
                    courseSize: "",
                    courseScore: "",
                    vip: "",
                    showOrder: "",
                    status: "",
                    createUser: "",
                    createTime: "",
                    updateUser: "",
                    updateTime: ""
                },
            }
        },
        methods: {
            strToArr: function (str) {
                let arr = [];
                let split = str.split(";");
                for (let i of split) {
                    arr.push(i);
                }
                return arr
            },
            //查询课程详情
            selectSubjectInfo: function () {
                this.axios.get(`/course/web-subject/subject/${this.sid}`)
                    .then((data) => {
                        if (data.code == 200) {
                            this.subject = data.data
                            this.tchList = this.strToArr(this.subject.subTeacher)
                            this.qqList = this.strToArr(this.subject.qqGroup)
                            let s = this.subject.subIntroduction;
                            let s1 = s.replaceAll("\n", "<br>");
                            this.subject.subIntroduction = s1
                        }
                    })
            },
            //查询课程详情
            selectCourseInfo: function () {
                this.axios.get(`/course/web-course/chapters/courses/${this.sid}`)
                    .then((data) => {
                        if (data.code == 200) {
                            this.list = data.data
                        }
                    })
            }
        },
        mounted() {
            this.selectSubjectInfo();
            this.selectCourseInfo();
        }
    }
</script>

<style scoped>
    .courseList {
        width: 1200px;
        margin: 0px auto;
    }

    .courseList .top {
        margin-top: 10px;
        overflow: hidden;
        border-radius: 6px;
    }

    /*课程图片*/
    .courseList .top .left {
        float: left;
        width: 320px;
        height: 205px;
    }

    .courseList .top .left img {
        margin: 10px 0px 0px 10px;
        width: 300px;
        height: 185px;
        border-radius: 6px;
    }

    /*.courseList .top .left img:hover{
        width: 320px;
        height: 205px;
        margin: -5px 0px 0px -5px;
        border-radius: 6px;
    }*/

    /*课程详情*/
    .courseList .top .right {
        float: left;
        width: 880px;
        height: 220px;
    }

    /*标题*/
    .courseList .top .right .title {
        width: 60px;
        margin-right: 8px;
        text-align: right;
        color: #000;
        font-weight: bolder;
    }

    .courseList .top .right .cont {
        color: #F00;
        font-weight: bolder;
    }

    .courseList .top .right .tch {
        width: 64px;
        margin-right: 6px;
    }

    .courseList .top .right .tch span {
        display: block;
        background-color: #EFEFEF;
        text-align: center;
        border-radius: 4px;
    }

    .courseList .top .right .qq {
        width: 106px;
        margin-right: 6px;
    }

    .courseList .top .right .qq span {
        display: block;
        background-color: #EFEFEF;
        text-align: center;
        border-radius: 4px;
    }

    /*********************************/

    .courseList .list {
        margin-top: 20px;
    }

    .courseList .list .c-c-box {
        border-radius: 4px;
        padding: 4px 0px;
        background-color: #333;
        /*background-image: linear-gradient(to right, #ccc, #CECECE);*/
    }

    /*章节盒子*/
    .courseList .list .chapter-pre {
        float: left;
        height: 32px;
        margin: 0px 14px 0px 20px;
    }

    .courseList .list .chapter {
        height: 32px;
        font-size: 16px;
        color: #F0F0F0;
        line-height: 32px;
    }

    .courseList .list .chapter span {
        font-size: 20px;
        color: #FFF;
        font-weight: bolder;
        line-height: 32px;
        margin-left: 8px;
    }

    /*课程*/
    .courseList .list .c-c-c {
        border-radius: 4px;
        margin: 4px 0px;
        padding: 4px 0px;
        overflow: hidden;
    }

    .courseList .list .c-c-c:hover {
        font-weight: bolder;
        background-color: #bcdeec;
    }

    /*章节盒子*/
    .courseList .list .c-c-c .course-pre {
        float: left;
        height: 32px;
        margin: 0px 14px 0px 40px;
    }

    .courseList .list .c-c-c .course-pre img {
        display: block;
        width: 24px;
        height: 24px;
        margin-top: 4px;
    }

    .courseList .list .c-c-c .course {
        float: left;
        height: 32px;
        color: #000;
        line-height: 32px;
    }
</style>